<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <script>
        document.write('<meta name="viewport" content="width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale='+(1/window.devicePixelRatio)+', user-scalable='+(1/window.devicePixelRatio)+'">');
     </script>
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>弹性盒</title>
  <style>
		#wrapper{
			width:100%;
			height:100%;
			display:flex;
            flex-direction: row ;
            justify-content: space-around;
            align-content:center;
            flex-wrap: wrap;
            
		}
		#wrapper div{
            width: 300px;
            height:300px;
            font-size: 50px;
            line-height: 300px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0,0,0,.8) inset;
            position: relative;
            background: #fff;
            margin-top: 20px;
/*            flex-grow: 1;*/
		}
      #wrapper div:after{
           background: #fff;
          display: block;
          content: '';
          position: absolute;
          z-index: -1;
          bottom:0px;
          margin: 0 auto;
          width: 100%;
          height: 50px;
          border-radius: 50%;
          box-shadow: 0 10px 10px rgba(0,0,0,.8);
      }
      #wrapper div:nth-of-type(1){
          order: 6;
      }
      #wrapper div:nth-of-type(2){
          order: 5;
      }
      #wrapper div:nth-of-type(3){
          order: 4;
      }
      #wrapper div:nth-of-type(4){
          order: 3;
      }
      #wrapper div:nth-of-type(5){
          order: 2;
      }
      #wrapper div:nth-of-type(6){
          order: 1;
      }
  </style>
 </head>
 <body>
 <div>
     
 </div>
		<div id='wrapper'>
				<div>item-1</div>
				<div>item-2</div>
				<div>item-3</div>
				<div>item-4</div>
				<div>item-5</div>
				<div>item-6</div>
		</div>
 </body>
</html>
